<template>
  <div class="home">
    <!-- <ul>
       <router-link tag="li" active-class="normal" exact-active-class="active" v-for="item in goods" :key="item.id" :to="'/about/' + item.name">{{item.name}}</router-link>
      <router-link tag="li"  :class="current === i ? 'active' : ''" v-for="(item, i) in goods" :key="item.id" :to="'/about/' + item.name">{{item.name}}</router-link>
      <router-link tag="li"  active-class="normal" exact-active-class="active" to="/page">page1</router-link>
      <router-link tag="li"  active-class="normal" exact-active-class="active" to="/page/page2">page2</router-link>
      <router-link tag="li"  active-class="normal" exact-active-class="active" to="/page/page2/page3">page3</router-link>
      <router-link tag="li"  active-class="normal" exact-active-class="active" to="/page/page2/page3/page4">page4</router-link>
    </ul> -->
    <!-- <router-view></router-view> -->
    <ul>
      <li @click="goPage('Page1')">page1</li>
      <li @click="goPage('Page2')">page2</li>
      <li @click="goPage('Page3')">page3</li>
      <li @click="goPage('Page4')">page4</li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      goods: [
        {
          name: "代发货",
          price: 6300,
          id: 1
        },
        {
          name: "已支付",
          price: 6300,
          id: 2
        },
        {
          name: "已完成",
          price: 6300,
          id: 3
        },
        {
          name: "未支付",
          price: 6300,
          id: 4
        }
      ]
    }
    
  },

  methods: {
    goPage(name) {
      // vue路由跳转是给予bom的方法 其实就是history location
      // window.location.href window.history.push()
      this.$router.push('/page?id=123')
    }
  }
}
</script>
<style>
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
  }
  li{
    padding: 5px 15px;
  }
  .active{
    background-color: blue;
    color: #fff;
  }
</style>
